<template>
    <div class="container">
        <div class="platform">
            <div v-for="(item, index) in itemList" :key="index" :style="item.styleStr">
                {{ item.text }}
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            itemList: [], // 球面字符牌面信息
            radius: 200, // 球形半径
            rotateArr: [60, 30, 0, -30, -60], // 每一圈绕X轴旋转的度数
            num: 12, // 每一圈有几个牌面
        };
    },
    mounted() {
        this.calcPosition();
    },
    methods: {
        calcPosition() {
            let numFlag = 0;
            let gap = 360 / this.num;
            this.rotateArr.forEach((item) => {
                for (let i = 0; i < this.num; i++) {
                    numFlag += 1;
                    this.itemList.push({
                        text: numFlag,
                        styleStr: `transform: rotateY(${i * gap
                            }deg) rotateX(${item}deg) translateZ(${this.radius}px)`,
                    });
                }
            });
            // 上极点
            this.itemList.push({
                text: (numFlag += 1),
                styleStr: `transform: rotateY(0deg) rotateX(90deg) translateZ(${this.radius}px)`,
            });
            // 下极点
            this.itemList.push({
                text: (numFlag += 1),
                styleStr: `transform: rotateY(0deg) rotateX(-90deg) translateZ(${this.radius}px)`,
            });
        },
    },
};
</script>
<style scoped>
.container {
    display: flex;
    width: 100%;
    height: 100%;
}

.platform {
    width: 100%;
    width: 40px;
    height: 40px;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateZ(10deg) rotateY(0deg);
    animation: rotate 10s linear infinite;
}

.platform:hover {
    animation-play-state: paused;
}

@keyframes rotate {
    from {
        transform: rotateX(-20deg) rotateZ(10deg) rotateY(0deg);
    }

    to {
        transform: rotateX(-20deg) rotateZ(10deg) rotateY(360deg);
    }
}

.platform>div {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 127, 127, 0.5);
    outline: 1px solid rgba(127, 255, 255, 0.25);
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.5);
    backface-visibility: visible;
    color: rgba(127, 255, 255, 0.75);
    font-size: 16px;
    text-shadow: 0 0 5px rgb(0 255 255 / 50%);
    font-weight: bold;
}
</style>
